<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>支付订单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }
        .layui-table-cell { height: auto; white-space: normal; }
    </style>
</head>

<body class="layui-anim layui-anim-up">
<input name="tableId" id="tableId" type="hidden" value="${param.tableId}">
<input name="orderId" id="orderId" type="hidden">
<div class="x-body">
    <h1 style="text-align: center">小狮子餐馆</h1>
    <p>餐桌:${table.tableName}</p>
    <p>台号：${table.tableCode}</p>
    <p>人数：${table.tableInfo.tableInfoNum}人 </p>
    <p>开台时间：${table.tableInfo.tableInfoSetupTime}</p>
    <input name="workerId" id="workerId" type="hidden" value="${table.tableInfo.tableInfoWorkerId}">
    <p id="workerName"></p>
    <div class="layui-inline" id="layerDemo" style="float:right;margin-right: 25px">
        <span>订单总价：<span id="orderMoney" style="color: red">0</span>元</span>

        <button class="layui-btn" data-method="setTop"  data-type="auto" STYLE="margin-left: 20px; ">支付订单</button>
    </div>
    <table class="layui-table" lay-filter="action" id="data-table"></table>

</div>
<script>
    layui.use(['table', 'form'], function () {
        $ = layui.jquery;
        var form = layui.form;
        // 数据表格
        var table = layui.table;

        //第一个实例
        var tableIns = table.render({
            elem: '#data-table'
            , maxHeight:550
            , width : 545
            , url: "${pageContext.request.contextPath}/foreground?m=findOrderByTableId&tableId="+$("#tableId").val()
            , cols: [[ //表头
                 {
                    field: 'foodName', title: '菜品名', width: 165, templet: (function (d) {
                        return d.orderFood.food.foodName;
                    })
                }
                , {
                    field: 'foodCount', title: '菜品数量', width: 125, templet: (function (d) {
                        return d.orderFood.foodCount;
                    })
                }
                , {
                    field: 'foodPrice', title: '菜品单价', width: 125, templet: (function (d) {
                        return d.orderFood.foodPrice + "元";
                    })
                }
                , {
                    field: 'foodMoney', title: '单项总价', width: 125, templet: (function (d) {
                        var orderMoney = parseFloat($('#orderMoney').text());
                        $('#orderMoney').text(orderMoney + d.orderFood.foodMoney);
                        return d.orderFood.foodMoney + "元";
                    })
                }

            ]]
        });

        // 获取当前餐桌的订单id
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/foreground?m=findOrderIdByTableID",
            dataType: "json",
            data: {tableId: $("#tableId").val()},
            success: function (data) {
                if (data.code === 200) {
                    $('#orderId').val(data.data);
                }
            }
        });

        // 通过员工id获取员工姓名
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/foreground?m=findWorkerById",
            dataType: "json",
            data: {workerId: $("#workerId").val()},
            success: function (data) {
                if (data.code === 200) {
                    $('#workerName').text("服务员："+data.data.workerName);
                }
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data1) {
            layer.confirm('确认提交订单吗?', function (data) {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/foreground?m=submitOrder",
                    dataType: "json",
                    data: {
                        orderId:$("#orderId").val(),
                        orderMoney:$("#orderMoney").text()
                    },
                    success: function (jsonData) {
                        layer.msg(jsonData.msg, function () {
                            if (jsonData.code === 200) {
                                window.parent.location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }
                        });

                    }
                });
            });
        });
    });

</script>
<script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        var orderMoney = $('#orderMoney').text();
        //触发事件
        var active = {
            setTop: function(){
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2
                    ,title: '选择支付类型'
                    ,area: ['390px', '260px']
                    ,shade: 0
                    ,content: '${pageContext.request.contextPath}/foreground?m=payChoicePage&orderMoney='+$('#orderMoney').text()+'&orderId='+$('#orderId').val()
                    ,btn: ['会员支付', '非会员支付']
                    ,yes: function(){
                        layer.closeAll();
                        x_admin_show('会员支付订单','${pageContext.request.contextPath}/foreground?m=memberPayPage&orderId='+$('#orderId').val()+'&orderMoney='+$('#orderMoney').text(),540,680);
                    }
                    ,btn2: function(){
                        layer.closeAll();
                        x_admin_show('非会员支付订单','${pageContext.request.contextPath}/foreground?m=normalPayPage&orderId='+$('#orderId').val()+'&orderMoney='+$('#orderMoney').text(),450,350);
                    }
                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>
</body>

</html>